<template>
  <div v-loading="listLoading" element-loading-text="拼命加载中" class="page-box">
    <div class="mains_time cenBet">
      <div></div>
      <el-button v-if="dataList.length" @click="onSubmit()">发起赠票</el-button>
    </div>
    <div style="  border-top: 1px solid #eee;margin:16px 0px;padding:16px 0px" class="add_ticket">
      <p class="ticket_status">门票选择:</p>
      <el-row :gutter="24" class="country">
        <el-col class="ticket-box" :span="8" v-for="(item,index) in dataList" :key="index">
          <span @click="selctone(item)" class="one-txt-cut" :class="item.isActive ? 'detail-selected' : 'detail-btn'">
            {{ item.tTypeName }}
            <!-- {{ $moment(item.stime,'MM月DD日')}}-{{ $moment(item.etime,'MM月DD日')}} -->
          </span>
          <!-- :max="item.tSum" -->
          <el-input-number v-model="item.giveNum" :min="0" @change="changeNum"></el-input-number>
        </el-col>
      </el-row>
    </div>
    <div class="search-box">
      <el-form ref="from" :model="from" class="botLeft  flex-wrap " label-width="110px">
        <el-form-item class="elFormItem" label="姓名">
          <el-input style="width:100%" v-model.trim="from.bName" placeholder="请输入负责人姓名"></el-input>
        </el-form-item>
        <el-form-item class="elFormItem" label="手机号">
          <el-input style="width:100%" v-model.trim="from.bTel" placeholder="请输入负责人手机号"></el-input>
        </el-form-item>
        <el-form-item class="elFormItem" label="公司名称">
          <el-input style="width:100%" v-model.trim="from.bCompany" placeholder="请输入负责人公司名称"></el-input>
        </el-form-item>
        <el-form-item style="width:100%" label="备注">
          <el-input type="textarea" :rows="4" placeholder="请输入备注内容" v-model.trim="from.sendTicketRemark"></el-input>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
<script>
import elementUIFun from "@/components/js/elementUIFun.js";
import servicePub from "@/api/servicePub";
import { regTel } from "@/components/js/reg";
export default {
  computed: {
    thisActivityId() {
      return this.$store.state.activityId.thisActivityId;
    }
  },
  watch: {
    thisActivityId(a, b) {
      this.initFun();
    }
  },
  data() {
    return {
      from: {
        bName: "",
        bTel: "",
        bCompany: "",
        sendTicketRemark: ""
      },
      // fieldListFrom: [], //得到表单字段
      listLoading: false,
      dataList: [] //票列表
    };
  },
  created() {
    this.initFun();
  },
  methods: {
    async initFun() {
      this.listLoading = true;
      const { data = [] } = await servicePub.queryTicketTypeListByEnable({
        activityId: this.$store.state.activityId.thisActivityId,
        isPay: "pay"
      });
      this.listLoading = false;
      for (let i = 0; i < data.length; i++) {
        this.$set(data[i], "giveNum", 0);
        this.$set(data[i], "isActive", false);
        this.$set(data[i], "tName", data[i].tTypeName);
      }
      this.dataList = data;
      console.log(data);

      // const vnote1 = (await servicePub.queryModelList({
      //   activityId: this.$store.state.activityId.thisActivityId,
      //   start: 0,
      //   limit: 10,
      //   isPay: "pay"
      // })).data;
      // if (vnote1.tempList.length && vnote1.tempList[0].vnote1) {
      //   this.fieldListFrom = JSON.parse(vnote1.tempList[0].vnote1);
      // }
    },
    //点击选中票类型
    selctone(item) {
      // if (!item.tSum) {
      //   this.$message({
      //     message: "库存不足",
      //     type: "warning"
      //   });
      //   return;
      // }
      item.isActive = !item.isActive;
      if (!item.isActive) {
        item.giveNum = 0;
      } else {
        item.giveNum = 1;
      }
    }, //赠票数量发生改变时触发
    changeNum() {
      this.dataList.forEach(element => {
        if (element.giveNum != 0) {
          element.isActive = true;
        } else {
          element.isActive = false;
        }
      });
    },
    async onSubmit() {
      if (!this.from.bName) {
        this.$message({
          message: "请输入负责人姓名",
          type: "warning"
        });
        return;
      }
      if (!this.from.bTel) {
        this.$message({
          message: "请输入负责人手机号",
          type: "warning"
        });
        return;
      }
      if (regTel.test(this.from.bTel) === false) {
        this.$message({
          message: "请输入正确的手机号",
          type: "warning"
        });
        return;
      }
      if (!this.from.bCompany) {
        this.$message({
          message: "请输入负责人公司名称",
          type: "warning"
        });
        return;
      }
      if (!this.from.sendTicketRemark) {
        this.$message({
          message: "请输入备注内容",
          type: "warning"
        });
        return;
      }

      // bEmail bIdCard bJob orderDetail industry scale
      let subData = {
        activityId: this.$store.state.activityId.thisActivityId,
        ascription: 1, //订单类型 0 个人 1团购
        source: 3, //来源1阿里2大麦3赠票4售卖
        isPay: "pay",
        total: 0,
        ticketList: [],
        ...this.from
      };
      this.dataList.map(item => {
        if (item.isActive) {
          subData.ticketList.push({
            sendTicketRemark: this.from.sendTicketRemark,
            tName: item.tTypeName,
            giveNum: item.giveNum,
            ticketTypeId: item.ticketTypeId,
            vnote1: item.vnote1
          });
          subData.total += item.giveNum;
        }
      });
      if (!subData.ticketList.length) {
        this.$message({
          message: "请选择要赠送的票",
          type: "warning"
        });
        return;
      }
      let ticketText = "";
      subData.ticketList.map(item => {
        ticketText += `${item.tName}:${item.giveNum}张 \n `;
      });
      let text = `您确定给${subData.bName}（${subData.bTel}） 赠送 \n ${ticketText}大会门票么？`;
      const confirm = await elementUIFun.$confirm(text);
      if (!confirm) {
        return;
      }
      console.log(subData);
      this.listLoading = true;
      const { success = false } = await servicePub.sendTicketByData(subData);
      this.listLoading = false;
      if (success) {
        this.$message({
          message: "赠票成功！",
          type: "success"
        });
        this.from = {
          bName: "",
          bTel: "",
          bCompany: "",
          sendTicketRemark: ""
        };
        this.dataList.map(item => {
          item.giveNum = 0;
        });
      }
    }
  }
};
</script>


<style lang="scss" scoped>
.mains_content {
  background-color: #fff;
  border-radius: 5px;
  .mains_time {
    padding: 30px 30px;
    display: flex;
    justify-content: space-between;
  }
  .add_ticket {
    padding: 50px 120px 0 120px;
    border-top: 1px solid #eee;
  }
  .ticket_status {
    font-size: 26px;
    text-align: left;
  }
}
.add_input {
  padding: 50px 120px;
  border-bottom: 1px solid #eee;
}
.country {
  margin: 40px 0 20px;
  .ticket-box {
    display: flex;
    align-items: center;
    padding-bottom: 20px;
  }
  .detail-btn,
  .detail-selected {
    cursor: pointer;
    display: inline-block;
    width: 200px;
    text-align: center;
    font-size: 14px;
    padding: 10px;
    margin-right: 30px;
    background-color: #f5f7fa;
  }
  .detail-selected {
    background-color: #00b2a9;
    color: #fff;
  }
}
</style>


